<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自由协同正文</title>
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
<link rel="stylesheet" href="http://cmp/css/cmp.css"/>
<link rel="stylesheet" href="http://commons.v5.cmp/cmp-resources/M1H5.s3css"/>
    <link rel="stylesheet" href="${data:dependencies.cmp}/css/cmp-listView.css">

<style>



</style>
</head>
<body class="cmp-fullscreen">

<header class="cmp-bar cmp-bar-nav">
<a class="cmp-action-back cmp-icon cmp-icon-left-nav cmp-pull-left"></a>
<a  class="   cmp-pull-right submit_text">处理人</a>
<h1 class="cmp-title">自由协同正文</h1>
</header>

<div class="cmp-content  position_relative ">

<div class="cmp-segmented_title_content">
        <ul class="cmp-table-view m1-details-title">
            <li class="cmp-list-cell "  >
                <div class="cmp-list-cell-info">
                    <span class="cmp-pull-left list_title_name" >
                        <span class="cmp-icon iconfont see-icon-v5-common-important-2"></span>
                        管理员管理员管理员管理员管理
                    </span>
                    <span class="cmp-ellipsis   cmp-pull-right list_title_time  ">
                        <span class="cmp-icon iconfont icon-yijingbiaoqi"></span>
                        <!--<span class="cmp-icon-synergy-list flag2 flag_mark   "></span>-->
                    </span>
                    <h5 class="cmp-ellipsis list_cont_info" >
                        <span class="cmp-pull-left">
                           <span>李鸿章</span>
                            <span>07-22 09:30</span>
                        </span>
                        <span class="cmp-pull-right">
                            <a class="href_show" href="#middle">
                                <span class="cmp-icon iconfont see-icon-accessory"></span>
                                <!--<span class="cmp-icon-synergy-list accessory1"></span>-->
                                <span>2</span>
                            </a>

                        </span>
                    </h5>
                </div>
            </li>
        </ul>
</div>

<div  class="cmp-control-content cmp-active">
    <div id="contentView" class="cmp-scroll-wrapper">
        <div class="cmp-scroll content_details">
            <!--附件模块-->
            <div id="middle" class=" ">
                <div class="cmp-accessory-content  ">
                    <div class="cmp-list-accessory">
                        <div class="accessory-img  ">
                            <span class="cmp-icon cmp-icon-image"></span>
                            <!--<img class=" cmp-pull-left img_setting" src="../img/accessory@3x.png">-->
                        </div>
                        <div class="accessory-info">
                            <div class="info-txt">
                                <span class="cmp-ellipsis accessory-info_name">管理员管理员管理员管理员</span>
                                <span class="cmp-ellipsis accessory-info_size">2KB</span>
                            </div>
                            <span class="cmp-icon iconfont icon-daoruxiazai download"></span>
                        </div>
                        <span class="cmp-icon iconfont icon-roundclosefill icon_delete"></span>

                    </div>
                </div>


            </div>

            <!--body正文-->
            <div id="listviewbox" class="listviewbox ">
                <div class="cmp-scroll position_relative">
                    <div class="cmp-content-padded">
                        <div id="content_div" class=""><p>&nbsp;&nbsp; gergrehre。</p>

                        <p>&nbsp;</p>

                        <p></p>

                        <!--<p><img alt="" src="http://photocdn.sohu.com/20151125/Img428064526.jpeg"></p>-->

                        <p></p>
                    </div>
                    </div>
                </div>
            </div>

            <!--折叠容器-->
            <div class="fold_content">
                <div class="fold_list_title">
                    <span>附言</span><span>(1)</span>
                    <span class="cmp-icon cmp-icon-arrowup cmp-pull-right"></span>
                </div>
                <!--附言-->
                <ul class="cmp-table-view display_block">
                    <li class="cmp-table-view-cell">
                        <p class="cmp-h5">请各位提前做好准备。</p>
                        <p class="cmp-h5">2015-11-23 13:47</p>
                    </li>
                </ul>
                <div class="fold_list_title">
                    <span>附件</span><span>(1)</span>
                    <span>关联文档</span><span>(1)</span>
                    <span class="cmp-icon cmp-icon-arrowup cmp-pull-right"></span>
                </div>
                <ul class="cmp-table-view display_block">
                    <li class="cmp-table-view-cell">
                        <p class="cmp-h5">请各位提前做好准备。</p>
                        <p class="cmp-h5">2015-11-23 13:47</p>
                        <!--回复列表附件-->
                        <div class="cmp-accessory-content fold_replay_content">
                            <div class="cmp-list-accessory">
                                <div class="accessory-img  ">
                                    <span class="cmp-icon cmp-icon-image"></span>
                                    <!--<img class=" cmp-pull-left img_setting" src="../img/accessory@3x.png">-->
                                </div>
                                <div class="accessory-info">
                                    <div class="info-txt">
                                        <span class="cmp-ellipsis accessory-info_name">管理员管理员管理员管理员</span>
                                        <span class="cmp-ellipsis accessory-info_size">2KB</span>
                                    </div>
                                    <span class="cmp-icon iconfont icon-daoruxiazai download"></span>
                                </div>
                                <span class="cmp-icon iconfont icon-roundclosefill icon_delete"></span>

                            </div>
                        </div>

                    </li>
                </ul>
                <div class="fold_list_title">
                    <span>回复意见</span><span>(1)</span>
                    <span class="cmp-icon cmp-icon-arrowup  cmp-pull-right"></span>
                </div>
                <!--回复意见-->
                <ul class="cmp-list-content cmp-list-opinion-reply m1-details-content display_block">
                    <li class="cmp-list-cell">
                        <div class="cmp-list-cell-img cmp-radio cmp-left">
                            <img class=" cmp-pull-left img_setting" src="img/shuijiao.jpg">
                        </div>
                        <div class="cmp-list-cell-info"  >
                            <span class="cmp-ellipsis cmp-pull-left list_title_name width_75">
                                <span>孙晓</span><span class="stat">已阅</span>
                            </span>
                            <span class="cmp-pull-right font_min text-ellipsis-4">3343434433</span>
                            <span class="cmp-icon iconfont icon-appreciatefill cmp-pull-right "></span>
                            <h6 class="list_cont_info">信息化推进办
                                公室张彦合同付款信息化信息化推进办公室张彦合同付款信息
                                化信息化推进办公室张彦合同付款信息化</h6>
                            <h6 class=" plaint">
                                <span class="cmp-pull-left">2015-05-06</span>
                                <span class="cmp-pull-right">来自移动客户端</span>
                            </h6>
                        </div>
                        <!--回复容器-->
                        <div class="replay-content">
                            <i class="replay-arrow2"></i>
                            <div class="cmp-list-cell-img cmp-radio cmp-left">
                                <img class=" cmp-pull-left img_setting" src="img/shuijiao.jpg">
                            </div>
                            <div class="cmp-list-cell-info">
                                <span class="cmp-ellipsis cmp-pull-left list_title_name">孙晓</span>
                                <h5 class="list_cont_info">信息化推进办</h5>
                                <h6 class=" plaint">
                                    <span>2015-05-06</span>
                                    <span class="cmp-h6">来自iphone10移动客服端</span>
                                </h6>

                            </div>
                            <!--回复列表附件-->
                            <div class="cmp-accessory-content fold_replay_content">
                                <div class="cmp-list-accessory">
                                    <div class="accessory-img  ">
                                        <span class="cmp-icon cmp-icon-image"></span>
                                        <!--<img class=" cmp-pull-left img_setting" src="../img/accessory@3x.png">-->
                                    </div>
                                    <div class="accessory-info width_75">
                                        <div class="info-txt">
                                            <span class="cmp-ellipsis accessory-info_name">管理员管理员管理员管理员</span>
                                            <span class="cmp-ellipsis accessory-info_size">2KB</span>
                                        </div>
                                        <span class="cmp-icon iconfont icon-daoruxiazai download"></span>
                                    </div>
                                    <span class="cmp-icon iconfont icon-roundclosefill icon_delete"></span>

                                </div>
                            </div>


                        </div>

                        <!--回复列表附件-->
                        <div class="cmp-accessory-content fold_replay_content">
                            <div class="cmp-list-accessory">
                                <div class="accessory-img  ">
                                    <span class="cmp-icon cmp-icon-image"></span>
                                    <!--<img class=" cmp-pull-left img_setting" src="../img/accessory@3x.png">-->
                                </div>
                                <div class="accessory-info">
                                    <div class="info-txt">
                                        <span class="cmp-ellipsis accessory-info_name">管理员管理员管理员管理员</span>
                                        <span class="cmp-ellipsis accessory-info_size">2KB</span>
                                    </div>
                                    <span class="cmp-icon iconfont icon-daoruxiazai download"></span>
                                </div>
                                <span class="cmp-icon iconfont icon-roundclosefill icon_delete"></span>

                            </div>
                        </div>

                    </li>
                </ul>
                <div class="fold_list_title">
                    <span>附言(<span>1</span>)</span><span>(1)</span>
                    <span class="cmp-icon cmp-icon-arrowup  cmp-pull-right"></span>
                </div>
                <!--附言-->
                <ul class="cmp-table-view display_block">
                    <li class="cmp-table-view-cell">
                        <a class="cmp-navigate-right">
                            <span class="cmp-badge background_fff ">新增附言</span>
                            <span class="cmp-h5">附言:</span>
                        </a>
                    </li>
                    <li class="cmp-table-view-cell">
                        <p class="cmp-h5">请各位提前做好准备。</p>
                        <p class="cmp-h5">2015-11-23 13:47</p>
                    </li>
                    <li class="cmp-table-view-cell">
                        <p class="cmp-h5">请各位提前做好准备。</p>
                        <p class="cmp-h5">2015-11-23 13:47</p>
                    </li>
                </ul>
            </div>

            <!--页签容器-->
            <div class="fold_content">
                <div id="segmentedControl"   class="cmp-segmented-control cmp-segmented-control-inverted border_bottom">
                    <a class="cmp-control-item cmp-active" href="#item1">
                        <span>全部</span>
                        <span class="sub">1111</span>
                    </a>
                    <a class="cmp-control-item hidden" href="#item2">
                        <span>赞</span>
                        <span class="sub">22</span>
                    </a>
                    <a class="cmp-control-item hidden" href="#item3">
                        <span>同意</span>
                        <span class="sub">33</span>
                    </a>
                    <a class="cmp-control-item hidden" href="#item4">
                        <span>不同意</span>
                        <span class="sub">55</span>
                    </a>
                </div>
                <div id="item1" class="cmp-control-content cmp-active">
                    <ul class="cmp-list-content cmp-list-opinion-reply m1-details-content margin_top-1">
                        <li class="cmp-list-cell">
                            <div class="cmp-list-cell-img cmp-radio cmp-left">
                                <img class=" cmp-pull-left img_setting" src="http://commons.v5.cmp/cmp-resources/m1_h5/img/document_type@1x.png">
                            </div>
                            <div class="cmp-list-cell-info"  >
                                <span class="cmp-ellipsis cmp-pull-left list_title_name width_85">
                                    <span>孙晓</span><span class="stat">已阅</span>
                                </span>
                                <span class="cmp-icon iconfont icon-commentfill cmp-pull-right"></span>
                               <h6 class="list_cont_info">信息化推进办
                                    公室张彦合同付款信息化信息化推进办公室张彦合同付款信息
                                </h6>
                                <h6 class=" plaint">
                                    <span class="cmp-pull-left">2小时前</span>
                                </h6>
                            </div>
                            <!--回复容器-->
                            <div class="replay-content"  >
                                <div class="cmp-list-cell-info width_auto">
                                    <span class="cmp-ellipsis cmp-pull-left list_title_name">孙晓</span>
                                    <h5 class="list_cont_info">信息化推进办</h5>
                                    <h6 class=" plaint">
                                        <span>2015-05-06</span>
                                        <span class="cmp-h6">来自iphone10移动客服端</span>
                                    </h6>
                                </div>
                                <div class="clear_left"></div>
                            </div>

                        </li>
                        <li class="cmp-list-cell">
                            <div class="cmp-list-cell-img cmp-radio cmp-left">
                                <img class=" cmp-pull-left img_setting" src="img/shuijiao.jpg">
                            </div>
                            <div class="cmp-list-cell-info"  >
                                <span class="cmp-ellipsis cmp-pull-left list_title_name width_85">
                                    <span>孙晓</span><span class="stat">已阅</span>
                                </span>
                                <span class="cmp-icon iconfont icon-commentfill cmp-pull-right"></span>
                               <h6 class="list_cont_info">
                                    <span class="cmp-icon iconfont icon-appreciatefill"  ></span>
                                    现在新闻的模块可以评论了
                                </h6>
                                <h6 class=" plaint">
                                    <span class="cmp-pull-left">2小时前</span>
                                </h6>
                            </div>
                        </li>

                    </ul>
                </div>
                <div id="item2" class="cmp-control-content">
                    222
                </div>
                <div id="item3" class="cmp-control-content">
                    333
                </div>
                <div id="item4" class="cmp-control-content">
                    444
                </div>
            </div>


        </div>
    </div>
</div>
</div>
<footer class="cmp-bar cmp-bar-footer cmp-bar-tab footer_custom">

    <div class="footer_handler_content">
        <a href="#">
            <img src="M1H5Mobilize/img/handler/ic_retrieve@2x.png" alt=""/>
            <span>取回</span>
        </a>
        <a href="#">
            <img src="M1H5Mobilize/img/handler/ic_forwarding@2x.png" alt=""/>
            <span>转发协同</span>
        </a>
        <a href="#">
            <img src="M1H5Mobilize/img/handler/ic_track@2x.png" alt=""/>
            <span>跟踪</span>
            <!--<img src="../img/handler/ic_cancel_track@2x.png" alt=""/>-->
            <!--取消跟踪-->
        </a>
    </div>




    <!--<button type="button" class="cmp-btn cmp-btn-primary cmp-btn-block handler ">处理</button>-->
    <!--<button class="cmp-btn cmp-btn-primary handler_more">-->

        <!--<span class="cmp-icon iconfont see-see-icon-more"></span>-->
    <!--</button>-->
</footer>


<s3:data name='cordova' />
<script src="http://cmp/js/cmp.js"></script>
<script src="${data:dependencies.cmp}/js/cmp-imgCache.js"></script>
<script src="${data:dependencies.cmp}/js/cmp-listView.js"></script>
<script src="${data:dependencies.cmp}/js/cmp-scrollBox.js"></script>
<script>

cmp.ready(function(){

    var wrapper = document.querySelector("#listviewbox");
//    wrapper.querySelector(".cmp-scroll").style.width = "700px";
//    wrapper.querySelector(".cmp-scroll").style.height = "200px";
    cmp.scrollBox("#listviewbox");
    cmp.listView("#contentView"); //滚动容器
    //初始化列表
//    点击附件按钮进行的显示与隐藏
    var href_show=document.querySelectorAll('.href_show');
    var contentView=document.getElementById('contentView');
    for(var i=0,len=href_show.length;i<len;i++){
        (function(index){
            href_show[index].addEventListener('click',function(){
                var thisId=this.href.toString().split('#')[1];
                var content= document.getElementById(thisId);
                 content.classList.contains('display_none')
                 ?content.classList.remove('display_none')
                 :content.classList.add('display_none');
                cmp.listView(contentView).refresh();
            })
        })(i);
    }

//    旗帜的点击事件
//    var flag_mark=document.querySelector('.flag_mark');
//        flag_mark.addEventListener('click',function(){
//            if(this.classList.contains('flag1')||this.classList.contains('cmp-active')){
//                this.classList.remove('cmp-active');
//                this.classList.add('flag2');
//                this.classList.remove('flag1');
//            }else{
//                this.classList.add('cmp-active');
//                this.classList.add('flag1');
//                this.classList.remove('flag2');
//            }
//        });

//    点击列表，进行折叠操作
    function listchecke(){
        var fold_list_title=document.querySelectorAll('.fold_list_title');
        if(fold_list_title==undefined || fold_list_title==null)return;
        for(var i = 0,len=fold_list_title.length;i<len;i++){
            fold_list_title[i].addEventListener('click',function(){
                var replaycont=this.nextElementSibling;
                if(replaycont.classList.contains('display_block')){
                    replaycont.classList.remove('display_block');
                    replaycont.classList.add('display_none');
                }else if(replaycont.classList.contains('display_none')){
                    replaycont.classList.add('display_block');
                    replaycont.classList.remove('display_none');
                }
                var icon=this.querySelector('.cmp-icon');
                if(icon.classList.contains('cmp-icon-arrowdown')){
                    icon.classList.remove('cmp-icon-arrowdown');
                    icon.classList.add('cmp-icon-arrowup');
                }else{
                    icon.classList.add('cmp-icon-arrowdown');
                    icon.classList.remove('cmp-icon-arrowup');
                }


//                 $(replaycont).toggle();
//                $(this).find('.cmp-icon').toggleClass('cmp-icon-arrowdown');
                cmp.listView("#contentView").refresh();
//                cmp.listView("#contentView").scrollTo(0,-300);
            })
        }
    }listchecke();
});




</script>
</body>
</html>

